<template>
  <div style="user-select:none">
    <div>
      <el-select v-model="year" @change="change">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" @change="change">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar v-model="value">
      <template #dateCell="{ date }">
        {{ getDay(date) }}
        <span v-if="isWeek(date)" class="spanBox">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      value: new Date(),
      options: [],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    }
  },
  created() {
    const arr = Array.from(Array(51))
    arr.forEach((item, index) => {
      arr[index] = 2022 + index - 25
    })
    this.options = arr
  },
  mounted() {

  },

  methods: {
    getDay(time) {
      const t = new Date(time)
      const day = t.getDate()
      return day
    },
    isWeek(time) {
      const t = new Date(time)
      const week = t.getDay()
      if (week == 0 || week == 6) {
        return true
      } else {
        return false
      }
    },
    change() {
      this.value = new Date(`${this.year}-${this.month}`)
      // console.log(new Date(), 666)
    }
  }
}
</script>

<style lang="scss" scoped>
.spanBox {
  color: #fff;
  background-color: red;
  border-radius: 50%;
  padding: 2px;
}

</style>
